<template>
    <div class="app-container">
      <Levelbar></Levelbar>
      <div class="main" v-loading = "loading">
            <div class="form-title">服务查看</div>
            <el-form ref="form" :model="form" label-width="110px" class="form-pading">
                <aside>基础信息</aside>
                <el-row :gutter="21">
                    <el-col :span="7">
                        <el-form-item label="所在省市区">
                            <span class="title-left">{{form.obj.baseinfo.provinceName}}{{form.obj.baseinfo.cityName}}{{form.obj.baseinfo.areaName}}</span>
                        </el-form-item>
                    </el-col>
                    <el-col :span="7">
                        <el-form-item label="经销商">
                            <span class="title-left">{{form.obj.baseinfo.orgUserName || '--'}}</span>
                        </el-form-item>
                    </el-col>
                    <el-col :span="7">
                        <el-form-item label="经销商手机号">
                            <span class="title-left">{{form.obj.baseinfo.orgPhone || '未开通'}}</span>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="21">
                    <el-col :span="7">
                        <el-form-item label="学校名称">
                            <span class="title-left">{{form.obj.baseinfo.schoolName || '--'}}</span>
                        </el-form-item>
                    </el-col>
                    <el-col :span="7">
                        <el-form-item label="服务名称">
                            <span class="title-left">{{form.obj.baseinfo.serviceName || '--'}}</span>
                        </el-form-item>
                    </el-col>
                    <el-col :span="7">
                        <el-form-item label="开通状态">
                            <span class="title-left">{{form.obj.baseinfo.status == 0 ? '未开通' : form.obj.baseinfo.status == 1 ? '审核中' : form.obj.baseinfo.status == 2 ? '已开通' : form.obj.baseinfo.status == 3 ? '审核未通过':'--'}}</span>
                        </el-form-item>
                    </el-col>
                </el-row>
                <aside>售价情况</aside>
                <div class="m-height">
                    <el-row :gutter="20">
                        <el-col :span="15">
                            <table class='table' align="left" v-if="form.tableState.length != 0">
                                <tr>
                                    <td></td>
                                    <td align="center">月收/元</td>
                                    <td align="center">半年收/元</td>
                                    <td align="center">年收/元</td>
                                    <td align="center">生效时间</td>
                                </tr>
                                <tr>
                                    <td align="center">标准底价</td>
                                    <td align="center">{{form.obj.basePrice.month | moneySwitch}}</td>
                                    <td align="center">{{form.obj.basePrice.halfYear | moneySwitch}}</td>
                                    <td align="center">{{form.obj.basePrice.year | moneySwitch}}</td>
                                    <td align="center">{{form.obj.basePrice.forceTime || '--'}}</td>
                                </tr>
                                <tr>
                                    <td align="center">市场指导价</td>
                                    <td align="center">{{form.obj.marketPrice.month | moneySwitch}}</td>
                                    <td align="center">{{form.obj.marketPrice.halfYear | moneySwitch}}</td>
                                    <td align="center">{{form.obj.marketPrice.year | moneySwitch}}</td>
                                    <td align="center">{{form.obj.marketPrice.forceTime || '--'}}</td>
                                </tr>
                                <tr>
                                    <td align="center">当前售价</td>
                                    <td align="center">{{form.obj.nowPrice.month | moneySwitch}}</td>
                                    <td align="center">{{form.obj.nowPrice.halfYear | moneySwitch}}</td>
                                    <td align="center">{{form.obj.nowPrice.year | moneySwitch}}</td>
                                    <td align="center">{{form.obj.nowPrice.forceTime || '--'}}</td>
                                </tr>
                                
                                <tr v-if="form.obj.nowPrice.forceTime != form.obj.afterPrice.forceTime">
                                    <td align="center">调整后售价</td>
                                    <td align="center">{{form.obj.afterPrice.month | moneySwitch}}</td>
                                    <td align="center">{{form.obj.afterPrice.halfYear | moneySwitch}}</td>
                                    <td align="center">{{form.obj.afterPrice.year | moneySwitch}}</td>
                                    <td align="center">{{form.obj.afterPrice.forceTime || '--'}}</td>
                                </tr>
                            </table>
                            <div class="tableState" v-if="form.tableState.length == 0">暂无数据</div>
                        </el-col>
                    </el-row>
                </div>
                <aside>调价记录</aside>
                <el-table :data="dataTable" border style="width: 100%" ref="multipleTable" v-loading="tableLoading" :row-class-name="tableRowClassName">
                    <el-table-column type="index" width="50" label="序号" align="center"></el-table-column>
                      <el-table-column label="调价内容" align="center" prop="detail">
                        <template scope="scope">
                            {{scope.row.detail || '--'}}
                        </template>
                    </el-table-column>      
                    <el-table-column label="价格生效时间" align="center" prop="sForceTime">
                        <template scope="scope">
                            {{scope.row.sForceTime || '--'}}
                        </template>
                    </el-table-column>      
                    <el-table-column label="审核人" align="center" prop="checkName">
                        <template scope="scope">
                            {{scope.row.checkName || '--'}}
                        </template>
                    </el-table-column>      
                    <el-table-column label="审核结果" align="center" prop="status">
                        <template scope="scope">
                            {{scope.row.status == 0 ? '未审核' : scope.row.status == 1 ? '审核通过' : scope.row.status == 2 ? '审核驳回' :'--'}}
                        </template>
                    </el-table-column>      
                    <el-table-column label="审核时间" align="center" prop="checkTime">
                        <template scope="scope">
                            {{scope.row.checkTime || '--'}}
                        </template>
                    </el-table-column>   
                    <el-table-column label="驳回原因" align="center" prop="remark">
                        <template scope="scope">
                            <el-button v-if="scope.row.status == 2" type="text" @click="btnDialog(scope.row.remark)">查看</el-button>
                            <span v-else>--</span>
                        </template>
                    </el-table-column>
                  </el-table>
                <div class="pagination-container" style="text-align:right">
                    <el-pagination
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="listQuery.total"
                        :current-page.sync="listQuery.page"
                        :page-sizes="config.pageSizes"
                        :page-size="config.pageSize"
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange">
                    </el-pagination>
                </div>
                <aside>审批结果</aside>
                <el-form-item label="">
                    <p>{{this.form.obj.checkStatus == 0 ? '未审核' : this.form.obj.checkStatus == 1 ? '审核通过' : this.form.obj.checkStatus == 2 ? '审核驳回' : '--'}}</p>
                </el-form-item>
            </el-form>
            <el-form label-width="100px" class = "form-pading">
            </el-form>
            <footer>
                <el-row type = "flex" class = "row-bg" justify = "center">
                    <el-col :span="2">
                        <el-button @click="go">返回</el-button>
                    </el-col>
                </el-row>
            </footer>
      </div>
      <el-dialog title="驳回原因" :visible.sync="dialogVisible" size="tiny">
            <span class="s-text">{{this.dialogText}}</span>
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
            </span>
        </el-dialog>
  </div>
</template>
<script>
import Levelbar from '../../layout/Levelbar';
import {
  getMembershipServiceLogDetail,
  pageMembershipAgentLog
} from 'api/newServiceAudit';
import { mapState, mapActions, mapGetters } from 'vuex';
export default {
    name: 'getService',
    components: { Levelbar },
    computed: {
        ...mapState({
            config: state => state.config.table
        }),
        ...mapGetters(['uid'])
    },
    data() {
        return {
            rules: {
                sMoney: [
          { required: true, message: '内容不能为空' },
          { pattern: /^[0-9]\d*$/, message: '请输入正整数' }
                ]
            },
            pickerOptions: {
                disabledDate(time) {
                    return time.getTime() < Date.now() - 8.64e7;
                }
            },
            tableLoading: false,
            loading: false,
            listQuery: {
        // 分页
                page: 1,
                total: 0
            },
            dataTable: [],
            dialogVisible: false,
            dialogText: '',
            form: {
                textarea: '',
                obj: {
                    checkStatus: '',
                    basePrice: {},
                    baseinfo: {},
                    marketPrice: {},
                    nowPrice: {},
                    afterPrice: {}
                },
                tableState: false
            }
        };
    },
    created() {
        this.init();
        this.search();
    },
    methods: {
    // 全局获取行数
        ...mapActions(['ChangePageSize']),
    // 分页
        handleSizeChange(val) {
            this.listQuery.page = 1;
            this.tableLoading = true;
            this.ChangePageSize(val);
            this.search();
        },
        handleCurrentChange(val) {
            this.tableLoading = true;
            this.listQuery.page = val;
            this.search();
        },
        go() {
            this.$router.go(-1);
        },
        search() {
            this.tableLoading = true;
            pageMembershipAgentLog(
                this.$route.params.schoolId,
        this.$route.params.serviceTypeId,
        this.listQuery.page,
        this.config.pageSize
      )
        .then(data => {
            this.tableLoading = false;
            if (data.data.content.list.length !== 0) {
                this.dataTable = data.data.content.list;
                this.form.tableState = true;
            } else {
                this.form.tableState = false;
            }
            this.listQuery.total = data.data.content.pagination.total;
        })
        .catch(() => {
            this.tableLoading = false;
        });
        },
        btnDialog(v) {
            this.dialogVisible = true;
            this.dialogText = v;
        },
        init() {
            this.loading = true;
            getMembershipServiceLogDetail(this.$route.params.id).then(data => {
                this.loading = false;
                this.form.obj = data.data.content;
                console.log(this.form.obj)
            }).catch(() => {
                this.loading = false;
            });
        },
        tableRowClassName(row, index) {
            if (row.status == 2) {
                return 'info-row';
            }
            return ''
        }
    }
};
</script>
<style lang="scss" scoped>
.s-text{
    display: block;
    text-align: center;
    font-size: 16px;
    word-break:break-all; /* 支持IE和chrome，FF不支持*/
    word-wrap:break-word; /* 以上三个浏览器均支持 */
}
.m-height {
  height: 250px;
}
.tableState{
  text-align: center;
  color: #666;
  font-size: 14px;
}
.el-table .info-row {
    background: #666;
}
.table {
  text-align: left;
  th,
  td {
    padding: 0 20px;
    width: 200px;
    height: 40px;
    font-size: 14px;
  }
  tr:nth-child(2),
  tr:nth-child(3) {
    color: #666;
  }
  tr:last-child {
    font-weight: bold;
  }
  a {
    font-size: 15px;
    color: #ff5e2c;
  }
}
.title-left {
  margin-left: 10px;
}
.monty-icon {
  padding-left: 0 !important;
}
.el-icon-plus {
  color: #ff5e2c;
}
.title-icon {
  color: #999;
}
.title-center {
  text-align: center;
}
.title {
  padding-top: 30px;
  font-size: 20px;
}
footer {
  padding: 20px 0 40px;
}
i {
  cursor: pointer;
}
.main {
  padding: 0 50px;
  background: #fff;
  box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.1);
  -webkit-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.1);
  .form-title {
    padding-top: 8px;
    text-align: center;
    font-size: 18px;
    color: #333;
    line-height: 72px;
    font-weight: bold;
    font-family: Microsoft YaHei;
    border-bottom: 1px solid #ddd;
  }
}
aside {
  position: relative;
  padding: 36px 0 0 20px;
  font-size: 14px;
  color: #333;
  margin-bottom: 40px;
  &::before {
    height: 14px;
    width: 4px;
    background: #ff5e2c;
    content: "";
    position: absolute;
    left: 0;
    bottom: 4px;
  }
}
input {
  -webkit-appearance: none;
  -moz-appearance: none;
  background-color: #fff;
  background-image: none;
  border-radius: 2px;
  border: 1px solid rgb(217, 200, 191);
  box-sizing: border-box;
  color: rgb(61, 41, 31);
  display: inline-block;
  font-size: inherit;
  height: 36px;
  line-height: 1;
  outline: none;
  padding: 3px 10px;
  transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
  width: 100%;

  &:focus {
    outline: none;
    border-color: #ff5e2c;
  }
}
</style>
